<!DOCTYPE HTML >
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<title>用户登陆</title>
		<meta charset="utf-8" />
		<link rel='stylesheet' type='text/css' th:href="@{/css/zhang_login.css}">
		<script th:src="@{/js/jquery-3.2.1.js}" type="text/javascript" ></script>
	</head>

	<style>
		.login_btn{
			width: 20%;
			height: 3em;
			background-color: #3cea11;
			margin: 2% 0;
			border: 3px solid #eee;
		}
		.login_btn_username{
			width: 20%;
			height: 3em;
			background-color: #3cea11;
			margin: 2% 0;
			border: 3px solid #eee;
		}
	</style>

	<body>
		<div class="login">
			<h2>用户登录</h2>
			<div class="login-top">
				<h1>用户登录</h1>
				<form action="http://9003/user/login">
					<input type="text" id="userPhone" name="userPhone" placeholder="请输入手机号" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '请输入手机号';}" ><span id="sp1"></span>
					<input type="text" id="verificationCode" name="verificationCode" placeholder="请输入短信验证码" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '请输入短信验证码';}">
				</form>
				<div class="forgot">
					<button onclick="sendCode()">
						发送验证码
					</button>
					<input type="button" class="login_btn" value="登录" onclick="login()">
					<input type="button" class="login_btn" value="注册" onclick="toReg()">
					<input type="button" class="login_btn_username" value="账号登录" onclick="toLogin()">
				</div>
			</div>
		</div>
		<div class="copyright">
			<p>西瓜二手车登陆 2023.03.30
				<a target="_blank" href="#"></a>
			</p>
		</div>
</body>
<script type="text/javascript">
	//跳转到注册页面
	function toReg(){
	window.location.href="/user/toReg";
	}

	function toLogin(){
		window.location.href="/user/toLogin";
	}

	function login(){
		const phone = $("#userPhone").val();
		if (phone == "" || phone.length != 11){
			alert("请输入正确的手机号")
			return;
		}
		$.ajax({
			url:"/user/login",
			type:"post",
			data:$("form").serialize(),
			success:function (data){
				if (data=="0"){
					alert("验证码错误！")
				}
				if (data=="2"){
					alert("验证码已过期！")
				}
				if (data=="success"){
					window.location.href="http://localhost:9002/usedCar/queryUsedCarListHome";
				}
			},error:function (){
				alert("登录失败！");
			}
		})
	}

	function sendCode(){
		const phone = $("#userPhone").val();
		if (phone == "" || phone.length != 11){
			alert("请输入正确的手机号")
			return;
		}

		$.ajax({
			url:"http://localhost:9003/verificationCode/sendCode?userPhone="+phone,
			type:"post",
			data:"",
			success:function (data){
				if (data=="0"){
					alert("您的账号未注册！")
				}
			}
		})


		// $.get("http://localhost:9003/verificationCode/sendCode?userPhone="+phone);
	}

	</script>
</html>